<style lang="scss" scoped>
.title {
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 1px solid #DCDFE6;
    span {
        margin-left: 10px;
        font-size: 14px;
    }
    .handles,
    .keepInfo {
        float: right;
    }
    button {
        padding: 2px 25px;
    }
}

.content {
    padding: 30px;
    form {
        &>div {
            min-height: 57px;
            display: flex;
            .ivu-form-item {
                float: left;
                flex: 1;
                .ivu-date-picker {
                    width: 100%;
                }
            }
        }
        &>div:nth-of-type(3) {
            .ivu-form-item:nth-of-type(1) {
                flex: 2;
            }
        }
    }
    .sampleInfo {
        margin-top: 15px;
        min-height:50px;
        position: relative;
        .el-table__row {
            td:last-of-type {
                a {
                    padding: 6px 10px;
                }
            }
        }
    }
}

</style>
<template>
    <div>
        <div class="title">
            <Icon type="person"></Icon>
            <span>样本信息</span>
            <div style='float:right;' v-show='doneShow'>
                <Button type="primary" @click='done'>完成</Button>
            </div>
        </div>
        <div class="content">
            <div class="addSample">
                <Button type="primary" icon="plus-round" @click="addSample()">添加样本</Button>
            </div>
            <div class="sampleInfo">
                <el-table v-if="!isWarnShow" v-loading="loading" element-loading-text="数据加载中，请稍后" :data='sampleInfo' border style="width: 100%">
                    <el-table-column label="样本编号">
                        <template slot-scope="scope">
                            <a href='javascript:;' @click="getSamplefile(scope.row)">{{ scope.row.samplecode }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="样本类型" prop="sampletype"></el-table-column>
                    <el-table-column label="测序区域" prop="region"></el-table-column>
                    <el-table-column label="亲属关系" prop="designator"></el-table-column>
                    <el-table-column label="文件状态" min-width='150%'>
                        <template slot-scope="scope">
                            <!-- <div v-for="(list,index) in scope.row"  style="height:40px;"> -->
                            <!-- <Poptip placement="bottom-end" v-if="scope.row.fastq_R1!=null" width="300">
                                <div slot="content" style="height: 80px;word-wrap: break-word;text-align: left;">
                                    {{scope.row.fastq_R1}}
                                </div>
                                <div class="imgbox">
                                    <div class="fastq_R1_on"></div>
                                </div>
                            </Poptip>
                            <div class="imgbox" v-else>
                                <div class="fastq_R1_off"></div>
                            </div> -->
                            <!-- <Poptip placement="bottom-end" v-if="scope.row.fastq_R2!=null " width="300">
                                <div slot="content" style="height: 80px;word-wrap: break-word;text-align: left;">
                                    {{scope.row.fastq_R2}}
                                </div>
                                <div class="imgbox">
                                    <div class="fastq_R2_on"></div>
                                </div>
                            </Poptip>
                            <div class="imgbox" v-else>
                                <div class="fastq_R2_off"></div>
                            </div> -->
                            <Poptip placement="bottom-end" v-if="scope.row.vcf!=null" width="300">
                                <div slot="content" style="height: 80px;word-wrap: break-word;text-align: left;">
                                    {{scope.row.vcf}}
                                </div>
                                <div class="imgbox">
                                    <div class="vcf_on"></div>
                                </div>
                            </Poptip>
                            <div class="imgbox" v-else>
                                <div class="vcf_off"></div>
                            </div>
                            <!-- <Poptip placement="bottom-end" v-if="scope.row.etcFiles!=null " width="300">
                                <div class="imgbox">
                                    <div class="etc_on"></div>
                                </div>
                                <div slot="content">
                                    <table>
                                        <tbody>
                                            <tr v-for="(item,index) in scope.row.etcFiles" :key="index" style="height:60px;word-wrap: break-word;text-align: left;">
                                                {{item}}
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </Poptip>
                            <div class="imgbox" v-else>
                                <div class="etc_off"></div>
                            </div> -->
                            <!-- </div> -->
                        </template>
                    </el-table-column>
                    <el-table-column label="任务状态">
                        <template slot-scope="scope">
                            <div class="handle">
                                <span class="status">{{scope.row.samplestatus | dataFormat}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <a href='javascript:;' @click='deleteSample(scope.row,scope.$index)'>删除</a>
                            <a href='javascript:;' @click='editSample(scope.row,scope.$index)'>编辑</a>
                        </template>
                    </el-table-column>
                    <div slot="empty"></div>
                </el-table>
                <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>
                <warn @callback="getSampleList" v-if="isWarnShow"></warn>
            </div>
            <div v-if="!isWarnShow" style='margin-top:10px;'>当前显示1-{{total}}条，共{{total}}条</div>
        </div>
        <!-- 样本信息 -->
        <div v-if="sampleShow">
            <sample-info :message='action' @modalshowEvent='modalShow()' @keepInfos='keepSampleInfo' @upsuccess='upSuccess'></sample-info>
        </div>
        <!-- 样本文件 -->
        <div v-if="sampleFileShow" class='sampleFile'>
            <sample-file :message='fileState' @modalshowEvent='modalFileShow()'></sample-file>
        </div>

    </div>
</template>
<script>
import sampleInfo from '@/components/congenica/sampleInfo.vue';
import sampleFile from '@/components/congenica/sampleFile.vue';
import { congenica } from 'api/index.js'
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
import warn from '@/components/warn.vue';
export default {
    name: 'sample',
    props: ['flag'],
    data() {
        return {
            loading:false,
            isWarnShow:false,
            emptyShow:false,
            upShow: false,                   //上传显示
            doneShow: true,                 //完成按钮显示
            total: 0,                        //总条数
            action: {},
            editIndex: 0,                     //编辑序号
            sampleFileShow: false,             //样本文件信息展示
            fileState: {},                    //当前行样本信息
            sampleShow: false,                //样本弹窗展示
            sampleInfo: [],
        }
    },
    filters: {
        // 格式化数据
        dataFormat(cellValue) {
            if(cellValue=='0'){
                return cellValue = "----"
            }else if(cellValue=='1' ) {
                return cellValue = "等待"
            }else if(cellValue=='2') {
                return cellValue = "正在运行"
            }else if(cellValue=='3') {
                return cellValue = "已完成"
            }else if(cellValue=='4') {
                return cellValue = "错误"
            }else if(cellValue=='6') {
                return cellValue = "未执行"
            }else if(cellValue=='5') {
                return cellValue = "vcf文件上传完成"
            }
        },
    },
    methods: {
        upSuccess(){
            this.getSampleList()
        },
        //点击完成按钮
        done() {
            this.$router.push("/congenica");
        },
        //添加样本
        addSample() {
            this.action['handle'] = 'add';
            this.action['sampleInfo'] = {};
            this.sampleShow = true;
        },
        //编辑样本
        editSample(row, index) {
            this.action['handle'] = 'edit';
            let nowSample = $.extend({}, row);
            this.action['sampleInfo'] = nowSample;
            this.sampleShow = true;
        },
        //关闭弹层
        modalShow() {
            this.sampleShow = false;
            this.getSampleList();
        },
        modalFileShow() {
            this.sampleFileShow = false;
            this.getSampleList();
        },
        //保存样本
        keepSampleInfo(info) {
            this.getSampleList()
        },
        //删除样本
        deleteSample(row, index) {
            let obj = {
                idList: [row.sampleid]
            }
            congenica.deleteSampleById(obj).then((res) => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    this.$Message.success(res.msg)
                    this.getSampleList()
                }else{
                    this.$Message.error(res.msg)
                }
            })
        },
        //点击样本编号
        getSamplefile(row) {
            this.sampleFileShow = true;
            this.fileState = row;
        },
        //获取样本列表
        getSampleList() {
            let obj = {
                "patientid": this.$store.state.patientid,
                "userId": getCookie("userid")
            }
            this.loading = true;
            this.isWarnShow = false;
            congenica.getSampleList(obj).then((res) => {
                if (res.returnCode == 200) {
                    this.sampleInfo = res.data;
                    if (this.sampleInfo != null) {
                        this.total = this.sampleInfo.length;
                    }
                }
                this.loading = false;
                if(this.sampleInfo==null || this.sampleInfo.length==0){
                    this.emptyShow=true;
                }else{
                    this.emptyShow = false;
                }
            }).catch((error) => {
                this.isWarnShow = true;
                this.loading = false;
            })

        }
    },
    mounted() {
        if (this.flag) {
            if (this.flag.flags == 'edit') {
                this.doneShow = false;
            }
        }
        this.getSampleList()

    },
    components: {
        sampleInfo,
        sampleFile,
        warn
    },
}
</script>


